<template>
	<view class="y-flex y-flex-1">
		<template v-if="pageStyle.enableNavigationTransparent">
			<com-status-bar></com-status-bar>
			<com-gap height="100"></com-gap>
		</template>
		<search-input v-if="enableSearch" v-model="keyword" @confirm="handleConfirm" :marginGap="pageStyle.pageMarginGap"></search-input>
		<view class="y-flex y-flex-1 position-relative">
			<com-tabs-list
			:current="subsectionSelected[subsectionMainIndex]"
			:column="subsectionColumn"
			:bg-color="subsectionBackgroundColor"
			:text-color="skinColor.color_1"
			:border-color="skinColor.color_gap_1"
			:selected-color="subsectionSelectedColor"
			:enable-swiper="enableSwiper"
			:tabsShow="subsection.length > 0 && subsection[subsectionMainIndex] && subsection[subsectionMainIndex].children.length > 1"
			:data="subsection[subsectionMainIndex] ? (subsection[subsectionMainIndex].children || []) : []"
			@change="handleTabsChange($event.current, subsectionMainIndex)">
				<com-icon slot="right" v-if="subsection.length > 1 || enableFilterIcon" @click="showTabsFull = !showTabsFull" name="filter" size="40" :color="skinColor.color_1"></com-icon>
				<template v-slot="{swiper, i}">
					<module-list :ref="'list' + i"
					:data="components"
					:cell="cell"
					:bounce="pageStyle.enableBounce"
					:back-top-show="pageStyle.enableBackTop"
					:refreshImage="pageStyle.pulldownRefreshImage"
					:pulldownable="pageStyle.enablePulldown == 1"
					:loadmoreable="pageStyle.enableLoadmore == 1"
					:backTopImage="pageStyle.backTopImage"
					:loadingColor="pageStyle.loadingColor"
					:marginGap="pageMarginGap"
					:params="moduleParams"
					:showTopGap="subsection.length > 0 && subsection[subsectionMainIndex] && subsection[subsectionMainIndex].children.length > 1"
					@scroll="handleScroll"
					@pulldown="handlePulldown(i, $event)">
					</module-list>
				</template>
			</com-tabs-list>
			<view class="position-absolute-cover" :class="{'top-80': subsection.length > 0 && subsection[subsectionMainIndex] && subsection[subsectionMainIndex].children.length > 1}" :style="{'visibility': showTabsFull ? 'visible' : 'hidden'}">
				<view class="position-absolute-cover bg-dark-mask" @tap="showTabsFull = false"></view>
					<scroll-view scroll-y="true" :style="{'background-color': skinColor.color_bg_1, 'max-height': (windowHeight * (2 / 3)) + 'px'}">
						<view class="y-flex pl-30 pr-30 pb-30">
							<template v-for="(sub, i) in subsection">
								<text class="fs-30 mt-40" :style="{color: skinColor.color_1}">{{sub.label}}</text>
								<com-grid class="mt-20" :data="sub.children" column="4">
									<template v-slot="{item, index}">
										<view class="pt-10 pb-10 border-radius-10"
										:style="{'background-color': subsectionSelected[i] == index ? subsectionSelectedColor : skinColor.color_gap_1}"
										@tap="handleTabsChange(index, i)">
											<text class="fs-30 text-align-center" :style="{color: subsectionSelected[i] == index ? skinColor.color_white : skinColor.color_1}">{{item.label}}</text>
										</view>
									</template>
								</com-grid>
							</template>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import SearchInput from './components/SearchInput.vue'
	import ModuleList from './components/ModuleList.vue'
	export default {
		inject: ['getPage', 'getPageStyle', 'getSkinColor', 'getWindowHeight', 'getTabbarIndex', 'getQuery'],
		components: {
			SearchInput,
			ModuleList
		},
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			//获取路由参数
			query () {
				return this.getQuery()
			},
			app () {
				return getApp().globalData
			},
			windowHeight () {
				return this.getWindowHeight()
			},
			page () {
				return this.getPage()
			},
			pageStyle () {
				return this.getPageStyle()
			},
			tabbarIndex () {
				return this.getTabbarIndex()
			},
			isNavigationBackgroundImage () {
				return this.pageStyle.navigationBackground.slice(0, 4) == 'http'
			},
			network () {
				return this.$store.getters['network/GET']
			},
			//选项栏栏数
			subsectionColumn () {
				return this.pageStyle.subsectionColumn || 'auto'
			},
			subsectionMainIndex () {
				return this.pageStyle.subsectionMainIndex || 0
			},
			//选项栏背景色
			subsectionBackgroundColor () {
				return this.pageStyle.subsectionBackgroundColor || this.skinColor.color_bg_1
			},
			//选项栏选中高亮色
			subsectionSelectedColor () {
				return this.pageStyle.subsectionSelectedColor || this.pageStyle.themeColor || this.skinColor.color_blue
			},
			//开启左右滑动
			enableSwiper () {
				return this.pageStyle.enableSwiper || false
			},
			//开启左右滑动
			enableFilterIcon () {
				return this.pageStyle.enableFilterIcon || false
			},
			//开启搜索
			enableSearch () {
				return this.pageStyle.enableSearch || false
			},
			//页面左右边距
			pageMarginGap () {
				return this.app.$utils.pixelunit(this.pageStyle?.pageMarginGap)
			},
			cell () {
				return this.page?.cell || {}
			},
			components () {
				return this.page?.components || []
			}
		},
		data () {
			return {
				subsection: [],//选项栏数据
				subsectionSelected: [],//选项栏选中索引集合
				keyword: '',//搜索关键词
				moduleParams: {},
				showTabsFull: false//展示筛选面板
			}
		},
		mounted() {
			this.keyword = this.query.keyword || ''
			this.handleGetSubsection()
		},
		methods: {
			onBackPress () {
				if ( this.showTabsFull ) {
					this.showTabsFull = false
					return true
				}
				return false
			},
			handleScroll (e) {
				this.$emit('scroll', Math.abs(e.contentOffset.y))
			},
			handleConfirm () {
				if ( !this.keyword ) {
					uni.showToast({
						title: '请输入搜索关键词',
						icon: 'none'
					})
					return
				}
				const key = this.subsectionSelected[this.subsectionMainIndex] || 0
				this.handlePulldown(key)
			},
			async handlePulldown (key, callback) {
				this.moduleParams = Object.assign({}, this.query, {keyword: this.keyword})
				this.subsection.forEach((s, k) => this.moduleParams['$'+ (k + 1)] = s.children[this.subsectionSelected[k]].value)
				this.$nextTick(function () {
					this.$refs['list' + key] && this.$refs['list' + key].initModule(callback, callback || !this.enableSwiper)
				})
			},
			async handleGetSubsection () {
				const subsection = this.page?.subsection || null
				let data = []
				if ( subsection ) {
					const params = Object.assign({}, this.query, {keyword: this.keyword})
					const staticData = subsection.staticData ? this.network.staticDataHandle(subsection.staticData, params) : []
					const dynamicData = subsection.dynamicData || []
					const request = subsection.request
					data = data.concat(staticData)
					const newRequest = request ? this.network.requestHandle(request, params) : null
					const response = newRequest ? await this.network.$request(newRequest) : null
					if ( response ) {
						for ( let i = 0 ; i < dynamicData.length; i++ ) {
							try{
								const dynamic = dynamicData[i]
								const label = dynamic.label ? await this.network.$text(dynamic.label, response) : ''
								const children = dynamic.children ? await this.network.$list(dynamic.children, response) : []
								data.push({ label, children })
							}catch(e){
								continue
							}
						}
					}
				}
				this.subsection = data
				this.subsectionSelected = new Array(data.length).fill(0)
				this.subsectionSelected.forEach((s, k) => {
					const value = this.query['$' + (k + 1)]
					if ( value ) {
						const index = this.subsection[k].children.findIndex(c => c.value == value)
						this.subsectionSelected[k] = index > -1 ? index : 0
					}
				})
				this.$nextTick(function () {
					setTimeout(() => {
						this.$emit('loaded', true)
						const key = this.subsectionSelected[this.subsectionMainIndex] || 0
						this.handlePulldown(key)
					}, 100)
				})
			},
			handleTabsChange (index, i) {
				if ( this.changeTimer ) {
					clearTimeout(this.changeTimer)
					this.changeTimer = null
				}
				this.$set(this.subsectionSelected, i, index)
				this.$nextTick(function () {
					const key = this.subsectionSelected[this.subsectionMainIndex] || 0
					this.changeTimer = setTimeout(() => {
						this.handlePulldown(key)
					}, 300)
				})
			}
		}
	}
</script>

<style>
</style>